<template>
	<div class="table-body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="quartz-job-search mb15">
				<el-input size="default" v-model="state.tableData.param.label" placeholder="请输入定时任务调度表名称" class="search-input"> </el-input>
				<el-button size="default" @click="getTableData" type="primary" class="ml10">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button v-auth="'job:add'" icon="Plus" size="default" type="success" class="ml10" @click="onOpenAdd(state.add)">
					新增
				</el-button>
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-auth="'monitor:job:export'"
            >导出</el-button>
            <el-button
               type="info"
               plain
               icon="Operation"
               @click="handleJobLog"
               v-auth="'monitor:joblog:query'"
            >日志</el-button>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column prop="name" label="任务名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="jobGroup" label="任务组名" show-overflow-tooltip></el-table-column>
				<el-table-column prop="invokeTarget" label="调用目标字符串" show-overflow-tooltip></el-table-column>
				<el-table-column prop="cronExpression" label="cron执行表达式" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="scope">
						<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="190">
					<template #default="scope">
						<el-tooltip content="修改" placement="top">
							<el-button link v-auth="'job:update'" icon="Edit" size="small" text type="primary" @click="onOpenEdit(state.edit, scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip content="删除" placement="top">
							<el-button link v-auth="'job:delete'" icon="Delete" size="small" text type="primary" @click="onRowDel(scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip content="执行一次" placement="top">
							<el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']"></el-button>
						</el-tooltip>
						<el-tooltip content="任务详细" placement="top">
							<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
						</el-tooltip>
						<el-tooltip content="调度日志" placement="top">
							<el-button link v-auth="'monitor:joblog:query'" type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="state.tableData.total > 0"
				:total="state.tableData.total"
				v-model:page="state.tableData.param.current"
				v-model:limit="state.tableData.param.size"
				@pagination="getTableData"
			/>
		</el-card>
		<JobDialog ref="jobDialogRef" :status-dict="sys_job_status" :group-dict="sys_job_group" @refresh="getTableData()" />
        <ViewDialog ref="viewDialogRef" :group-dict="sys_job_group" />
	</div>
</template>

<script setup lang="ts" name="quartzJob">
import { jobApi } from '/@/api/monitor/quartz/job';
import constConfig from '/@/utils/constConfig';
import router from "/@/router";

// 引入组件
const JobDialog = defineAsyncComponent(() => import('/@/views/monitor/quartz/job/dialog.vue'));
const ViewDialog = defineAsyncComponent(() => import('/@/views/monitor/quartz/job/view.vue'));
const { proxy } = <any>getCurrentInstance();
const { sys_job_status, sys_job_group } = proxy.useDict('sys_job_status', 'sys_job_group');

// 定义变量内容
const jobDialogRef = ref();
const viewDialogRef = ref();
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			label: '',
			...constConfig.pageModel,
		},
	},
	formData: {
		label: '',
		value: '',
		status: '0',
		type: '',
		typeCn: '', // 字典描述
		sort: 50,
	},
	...constConfig.dialogType,
});

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	jobApi()
		.page(state.tableData.param)
		.then((res) => {
			state.tableData.data = res.data.records ?? [];
			state.tableData.total = res.data.total;
			state.tableData.loading = false;
		});
};
// 打开新增字典弹窗
const onOpenAdd = (type: string) => {
	let row = JSON.parse(JSON.stringify(state.formData));
	jobDialogRef.value.openDialog(type, row);
};
// 打开修改字典弹窗
const onOpenEdit = (type: string, row: JobType) => {
	row = JSON.parse(JSON.stringify(row));
	jobDialogRef.value.openDialog(type, row);
};
// 删除字典
const onRowDel = (row: JobType) => {
	ElMessageBox.confirm(`${constConfig.delString.tip1 + row.label + constConfig.delString.tip2}`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			jobApi()
				.del(row.id)
				.then(() => {
					getTableData();
				});
		})
		.catch(() => {});
};
const handleStatusChange = (row: any) => {
	let text = row.status === '0' ? '启用' : '停用';
	proxy.modal
		.confirm('确认要"' + text + '""' + row.name + '"任务吗?')
		.then(function () {
			return jobApi().changeJobStatus(row);
		})
		.then(() => {
			proxy.modal.msgSuccess(text + '成功');
		})
		.catch(function () {
			row.status = row.status === '0' ? '1' : '0';
		});
};
function handleRun(row) {
  proxy.modal.confirm('确认要立即执行一次"' + row.name + '"任务吗?').then(function () {
    return jobApi().runJob(row.id);
  }).then(() => {
    proxy.modal.msgSuccess("执行成功");})
  .catch(() => {});
}
const handleView = (row: JobType) => {
    viewDialogRef.value.openDialog(row.id);
};
const handleJobLog = (row: JobType) => {
    router.push({ path: "/moitor/jobLog/index", query: row });
};
const handleExport = () => {
    proxy.download(jobApi().exportUrl(), 
        state.tableData.param);
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style scoped lang="scss">
.table-body-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
</style>
